<template>
	<div class="cluster">
		<!-- <div class="header">集群健康状态：HEALTH_OK</div> -->
		<div class="content h100">
			<el-card>
				<Line title="集群OPS" name="ops" :data="state.opsData" :x-interval-show="2" :y-unit="'次/秒'"/>
			</el-card>
			<el-card>
				<Line title="存储恢复OPS" name="recoveryOps" :data="state.recoveryOpsData" :x-interval-show="2" :y-unit="'次/秒'"/>
			</el-card>
			<el-card class="w100">
				<Line title="PG" name="pg" :data="state.pgData" />
			</el-card>
		</div>
	</div>
</template>
<script lang="ts" setup>
import { defineAsyncComponent, inject, onUnmounted, reactive, ref, watch } from 'vue';
import { useMonitorApi } from '/@/api/monitor-center';
import { dayjs } from 'element-plus';
import { LineChartData } from '/@/types';
import { lineTimeHandle, fillDates } from '/@/utils/other';
import { opsMap, pgMap } from '/@/utils/const';

interface DataState{
	opsData:LineChartData;
	pgData:LineChartData;
	recoveryOpsData:LineChartData;
}

const Line = defineAsyncComponent(() => import('/@/components/echarts/line.vue'));

const monitorApi = useMonitorApi();
const state = reactive<DataState>({
	opsData: {
		seriesNames: [],
		seriesData: []
	},
	pgData: {
		seriesNames: [],
		seriesData: []
	},
	recoveryOpsData: {
		seriesNames: [],
		seriesData: []
	}
});
const datetimerange = inject('datetimerange', ref());
const defaultdaterange = inject('defaultdaterange', ref());
// get data
const getClusterMon = () => {
	const params = {
		start: datetimerange.value ? datetimerange.value[0] : dayjs().subtract(defaultdaterange.value[0], defaultdaterange.value[1]).format('YYYY-MM-DD HH:mm:ss'),
		end: datetimerange.value ? datetimerange.value[1] : dayjs().format('YYYY-MM-DD HH:mm:ss')
	};
	monitorApi.getClusterMon(params).then((res:any) => {
		const ops = fillDates(params.start, res.data.ops);
		const pg = fillDates(params.start, res.data.pg);
		const recoveryOps = fillDates(params.start, { write: res.data.recoveryOps });
		state.opsData = lineTimeHandle(ops, opsMap);
		state.pgData = lineTimeHandle(pg, pgMap);
		state.recoveryOpsData = lineTimeHandle(recoveryOps, opsMap);
		// console.log(111, state.opsData);
	}).catch(() => {
		state.opsData = lineTimeHandle();
		state.pgData = lineTimeHandle();
		state.recoveryOpsData = lineTimeHandle();
	});
};

const activeTab = inject('activeTab', ref('cluster'));
const interval = inject('interval', ref(5000));
const timer = ref();
// Start the timer and call the interface immediately
const openTimer = () => {
	if (!timer.value) {
		getClusterMon();
		timer.value = setInterval(getClusterMon, interval.value);
	}
};
// close Timer
const closeTimer = () => {
	if (timer.value) {
		clearInterval(timer.value);
		timer.value = null;
	}
};
const handle = () => {
	if (activeTab.value === 'cluster') {
		if (datetimerange.value) {
			getClusterMon();
			closeTimer();
		} else {
			openTimer();
		}
	} else {
		closeTimer();
	}
};
// Switch to the current tab and turn on polling
watch(
	activeTab,
	() => {
		handle();
	},
	{
		immediate: true
	}
);
// Monitoring time range change
watch(
	datetimerange,
	() => {
		handle();
	}
);
// Monitoring time interval change
watch(
	interval,
	() => {
		// Reset timer
		if (timer.value) {
			clearInterval(timer.value);
			timer.value = setInterval(getClusterMon, interval.value);
		}
	}
);
onUnmounted(() => {
	closeTimer();
});
</script>
<style lang="scss" scoped>

</style>